<template>
  <div class="lineChart">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";

let xaxisData = ["第一个月", "第二个月", "第三个月", "第四个月", "第五个月"];
let yaxisData = [2220, 1682, 2791, 3000, 4090];
let animationData = [["第一个月", 2220], ["第二个月", 1682], ["第三个月", 2791], ["第四个月", 3000], ["Thu", 4090]]
const option = reactive({
  grid: {
    top: "15%",
    left: "1%",
    right: "1%",
    bottom: "1%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    confine: true,
    backgroundColor: "rgba(255, 132, 90, 0.3)",
    borderColor: "#FF845A",
    extraCssText: "box-shadow: 2px 2px 4px 0px rgba(255, 132, 90, 0.3);",
    textStyle: {
      fontSize: 16,
      color: "#fff",
      fontFamily: "PangMenZhengDao",
    },
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "#FF845A",
      },
    },
  },
  xAxis: {
    data: xaxisData,
    boundaryGap: true,
    axisLine: {
      show: true,
      symbol: ["none", "rect"],
      symbolSize: [6, 12],
      lineStyle: {
        width: 2,
        color: "#537DAA",
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    name: "(个)",
    nameTextStyle: {
      color: "#AEC9FF",
      fontWeight: 400,
      fontSize: 14,
    },
    axisLabel: {
      color: "#AEC9FF",
    },
    axisLine: {
      show: true,
      symbol: ["none", "rect"],
      symbolSize: [6, 12],
      lineStyle: {
        width: 2,
        color: "#537DAA",
      },
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(83, 125, 170, 0.2)",
      },
    },
  },
  series: [
    {
      type: "line",
      // smooth: true,
      lineWidth: 1.2,
      data: yaxisData,
      symbol: "none",
      itemStyle: {
        color: "rgba(114, 178, 255, 1)",
      },
      lineStyle: {
        width: 5,
        shadowBlur: 20,
        shadowColor: "#72B2FF",
        shadowOffsetY: 10,
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0, // 右
          y: 1, // 下
          x2: 0, // 左
          y2: 0, // 上
          colorStops: [
            {
              offset: 0,
              color: "#192F68", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#18E0FD", // 90% 处的颜色
            },
          ],
        },
        opacity: 1,
      },
    },
    {
      type: "lines",
      coordinateSystem: "cartesian2d",
      data: [{
        coords: animationData
      }],
      zlevel: 1,
      polyline: true,
      symbol: "circle",
      effect:
      {
        show: true,
        trailLength: 0.4,
        symbol: "circle",
        period: 8,
        symbolSize: 8
      },
      lineStyle:
      {
        normal:
        {
          color: '#64FFFF',
          width: 0,
          opacity: 0,
          curveness: 0
        }
      }
    },
  ],
});
</script>

<style scoped lang="scss">
.lineChart {
  height: 100%;
}
</style>
